<template>
	<!--  -->
  <div class="phone">
        <div v-for="item in allItemList" :key="item.id" class="mainItemMenu">
            <span style="font-size:20px;font-weight:700">{{item.name}}</span>
        <router-link to="/goods">
        <div class="phone1">查看更多<i class="el-icon-d-arrow-right"></i></div>
        </router-link>
        <ul class="mainItemUl">
            <li class="mainItem" v-for="item in item.children" :key="item.id">
				<router-link :to="{path:'/goods/details',query:{id:item.id}}">
                <img class="mainItemImg" :src="$target + item.imgPath">
                <span style="font:200;margin: 1px;height: 40px;"><br/>{{item.name}}</span>
                <span style="font:200;font-size:14px;height: 40px;color:rgb(99, 96, 96)"><br/>{{item.advantage}}</span>
                <div style="font:200;color:red;height: 40px;margin-botton:5px"><br/>{{item.price}}</div>
				</router-link>
            </li>
        </ul>
        </div>
  </div>
  <!--  -->
</template>

<script>
export default {
    name: "phone",
    data(){
        return{
            allItemList:''
        }
    },
    created(){
        this.$axios.post("/api/menu/getAllItemList")
        .then((res)=>{
            this.allItemList=res.data.data;
        })
    }
}
</script>

<style>
.mainItemUl{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.mainItem:hover {
	box-shadow: 0 12px 8px rgba(191, 191, 191, .2);
	transform: translateY(-5px);
}
.mainItemImg{
    width: 100px;
    height: 150px;
}
.mainItem{
	width: 200px;
	margin: 10px;
	padding: 20px 10px;
	text-align: center;
	background-color:whitesmoke
}
.mainItemMenu{
    margin: 20px 0;
}
.phone{
/*    弹性布局设置*/
    display: flex;
    /* 按垂直方向排列 */
    flex-direction: column;
    justify-content: flex-start;
    /* 可多行排列 */
    flex-wrap: wrap;
    margin: 0,20px; 
}
.phone1{
   float: right;
    font-size:20px;
    font-weight:700
}

</style>